<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>eXBinder - Example 1</title>
	<style type="text/css">
	
	html,body {
		background-color: #f2f2f2;
		font-family: sans-serif;
		color: #666;
	}
	body .outer{
		max-width: 1000px;
		padding: 30px;
        margin: 0 auto;
	}
	div.edit, div.preview {
		padding: 10px 20px 40px 20px;
		width: 49%;
		border: 1px solid #ddd;
		background-color: #ffffff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		min-height: 400px;
	}
	div.edit {
		float: left;
	}
	div.edit .doc .title, div.edit .doc .text, div.edit .doc .from{
		font-family: cursive;
		color: black;
	}
	div.edit .doc .text{ 
		min-height: 200px;
	}
	div.edit .doc [contenteditable]{
		padding: 5px 7px;
		border: 1px solid #eee;
	}

	div.preview {
		float: right;
	}
	div.preview .doc {
		font-family: monospace;
		color: black;
	}

	</style>
</head>
<body onload="eXBinder()">
    
    <div class="outer">
    
	<p>This awesome app lets you can handwrite your letter on the left and preview it on the right. How cool is that? =)</p>

	<div class="edit">
		<p>Write your letter here:</p>
		<div class="doc eXBinder">
			<label>Your name:</label>
			<p contenteditable="true" class="from">#</p>
            <label>Title:</label>
			<p contenteditable="true" class="title">#</p>
			<label>Text:</label>
			<div contenteditable="true" class="text">#</div>
		</div>
	</div>
	<div class="preview">
		<div class="doc eXBinder">
            <p>From:</p>
            <p class="from">#</p>
			<h1 class="title">#</h1>
			<div class="text">#</div>
		</div>
	</div>
    
    </div>

	<script type="text/javascript" src="../eXBinder.min.js"></script>
	
	<script type="text/javascript">
	var dtd = "<!DOCTYPE doc [<!ELEMENT doc (from, title,text)><!ELEMENT from (#PCDATA)><!ELEMENT title (#PCDATA)><!ELEMENT text (#PCDATA)>]>";
	var xml = "<doc><from>[Your name]</from><title>Untitled Document</title><text>[Write something here]</text></doc>";
	</script>

</body>
</html>
